<template>
  <div class="role">
    <van-popup v-model:show="show" :style="{ height: '50%' }">
      <span class="title">切换角色</span>
      <div class="role-item" v-for="item in rec.options" :key="item">
        <svg-icon :icon-class="item.svgName" />
        <!-- <svg-icon :icon-class="item.svgName_ept" /> -->
        <span class="role-item-name">{{ item.name }}</span>
        <span class="role-item-right">
          <span class="role-item-dot"></span>
          <span class="role-item-current">当前角色</span>
        </span>
      </div>
    </van-popup>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
const show = ref(false);
const rec = reactive({
  options: [
    {
      svgName: "teacher",
      svgName_ept: "teacher_ept",
      name: "普通教师",
    },
    {
      svgName: "repairor",
      svgName_ept: "repairor_ept",
      name: "维修职工",
    },
    {
      svgName: "admin",
      svgName_ept: "admin_ept",
      name: "管理员",
    },
  ]
})

const toggleShow = () => {
  show.value = !show.value;
};
defineExpose({
  toggleShow,
});
</script>

<style lang="less" scoped>
.role {
  /deep/ .van-popup {
    width: 295px;
    height: 342px !important;
    padding: 24px 16px;
    background: #fff;
    border-radius: 10px;
    text-align: center;
    padding-bottom: 0;
  }
  .title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 24px;
    display: inline-block;
  }
  &-item {
    border: 1px solid #EBF1FF;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    padding-right: 0;
    margin-bottom: 16px;
    position: relative;
    svg {
      width: 48px;
      height: 48px;
    }
    &-name {
      font-size: 14px;
      line-height: 20px;
      color: #303233;
      font-weight: 600;
      margin-left: 24px;
      margin-right: 43px;
    }
    &-dot {
      width: 6px;
      height: 6px;
      border-radius: 6px;
      background: #3DD220;
      margin-right: 6px;
      display: inline-block;
    }
    &-current {
      font-size: 12px;
      line-height: 20px;
      color: #616366;
    }
    &-right {
      position: absolute;
      right: 16px;
    }
  }
}
</style>
